<template>
    <div id="downList">
        <section class="aboutBox">
            <header>
                {{titleName}}
            </header>
            <div class="aboutInfo">
                <ul class="aboutMsg clearfix">
                    <li v-for="item in listAll" :key="item.id" @click="parentHide(item.id)">
                        <router-link :to="{path:'/downTools',query:{downItemId : item.id}}">
                            <div class="downImg">
                                <img :src="item.logo" alt="">
                                <!-- <img src="http://e.hiphotos.baidu.com/image/pic/item/83025aafa40f4bfb0f815ad60e4f78f0f63618db.jpg" alt=""> -->
                            </div>
                            <div class="downText">
                                <p :title="item.title">{{item.title}}</p>
                                <p>{{item.time}}</p>
                            </div>
                        </router-link>
                    </li>
                    
                </ul>
                
            </div>
        </section>
    </div>
</template>
<script>
export default {
    name:"about",
    props:["titleName","listAll"],
    data () {
        return{
            msg:'000'
        }
    },
    methods:{
        parentHide(id){
            this.$emit('listHide',id);//执行父级事件
        }
    },
    components:{
        // useHelp
    },
}
</script>
<style scope>
    #downList .aboutBox{
        width: 980px;
        min-height: 680px;
        padding: 10px;
        background: #fff;
        padding-bottom: 100px;
    }
   #downList .aboutBox header{
        font-size: 14px;
        line-height: 46px;
        color: #303133;
        font-weight: bold;
        padding-left: 37px;
        border-bottom: 1px solid #dddddd;
    }
    #downList .aboutInfo{
        padding: 0;
        padding-top: 26px;
    }
    #downList .aboutMsg{
        margin-right: -10px;
    }
    #downList .aboutMsg li{
        width: 232px;
        height: 220px;
        border-radius: 7px;
        float: left;
        margin-right: 10px;
        margin-bottom: 19px;
        /* background: red; */
    }
    .tzMsg{
        font-size: 14px;
        line-height: 28px;
        color: #525252;
        padding-top: 21px;
        padding-bottom: 120px;
    }
    .downImg img{
        display: block;
        width: 100%;
        height: 174px;
    }
    .downText{
        border: 1px solid #dddddd;
        border-top: none;
        border-radius:0 0 7px 7px;
        padding-left: 8px;
        padding-top: 6px;
        padding-bottom: 2px;
    }
    .downText p:nth-of-type(1){
        font-size: 14px;
        line-height: 20px;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .downText p:nth-of-type(2){
        font-size: 12px;
        line-height: 18px;
        color: #a7a7a7;
    }
</style>